<template>
  <div class="dashboard-container">

    <!-- 面板统计组件 -->
    <panel-group :userTotal="userTotal"/>
  </div>
</template>

<script>
import PanelGroup from './PanelGroup'

// 1. 导入home.js
import api from '@/api/home'

export default {
  name: 'DashBoard',
  components: { PanelGroup },

  data() {
    return {
      userTotal: 0 // 总用户
    }
  },

  mounted() {
    // 查询面板中相关的总记录数
    this.getTotal()
  },

  methods: {
    async getTotal() {
      //查询总用户。 data取别名userTotal
      const {data} = await api.getUserTotal()
      this.userTotal = data.total
    }
  }
}

</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
